
<script>
// 最终效果:
// <vxe-table-column
//   :key="columnIndex"
//   :field="column.field"
//   :title="column.title"
//   :sortable="column.sortable"
//   :visible="column.visible"
//   :formatter="column.formatter"
// >
//   <template v-slot:header>
//     <div style="line-height:20px;">{{ column.title }}</div>
//     <!-- 使用vue-katex指令渲染公式 -->
//     <!-- https://developer.aliyun.com/mirror/npm/package/kim-vue-katex -->
//     <div
//       v-if="column.unit"
//       v-katex="addBracketForKatex(column.unit)"
//       style="height:12px;line-height:12px;font-size:10px;"
//     />
//   </template>
// </vxe-table-column>

// 给公式加上括号
function addBracketForKatex(latex) {
  return `(${latex})`
}

// Vue props中Object和Array设置默认值
// https://www.cnblogs.com/zhaobao1830/p/10939071.html

export default {
  props: {
    value: {
      type: Object,
      require: true,
      default: function() {
        return {}
      }
    }
  },
  render: function(h) {
    // 属性定义
    // 必须提供field和title字段
    const props = {
      field: this.value['field'],
      title: this.value['title']
    }

    typeof this.value['width'] === 'number' &&
      (props['width'] = this.value['width'])
    typeof this.value['minWidth'] === 'number' &&
      (props['minWidth'] = this.value['minWidth'])
    typeof this.value['sortable'] === 'boolean' &&
      (props['sortable'] = this.value['sortable'])
    typeof this.value['visible'] === 'boolean' &&
      (props['visible'] = this.value['visible'])
    typeof this.value['formatter'] === 'function' &&
      (props['formatter'] = this.value['formatter'])

    // 插槽
    const that = this
    const scopedSlots = {
      // 创建slot
      // <template v-slot:header>xxx</template>
      header: props => {
        const children = []
        // 创建div
        // <div style="line-height:20px;">{{ column.title }}</div>
        children.push(
          h('div', {
            style: {
              lineHeight: '20px'
            },
            domProps: {
              innerHTML: that.value['title']
            }
          })
        )
        // 创建div
        // 使用vue-katex指令渲染公式
        // https://developer.aliyun.com/mirror/npm/package/kim-vue-katex
        // <div
        //   v-if="column.unit"
        //   v-katex="addBracketForKatex(column.unit)"
        //   style="height:12px;line-height:12px;font-size:10px;"
        // />
        if (
          typeof that.value['unit'] === 'string' &&
          that.value['unit'] !== ''
        ) {
          children.push(
            h('div', {
              style: {
                height: '12px',
                lineHeight: '20px',
                fontSize: '10px'
              },
              directives: [
                {
                  name: 'katex',
                  value: addBracketForKatex(that.value['unit'])
                }
              ]
            })
          )
        }
        return h('div', children)
      }
    }

    // 绑定事件
    const tag = 'vxe-table-column'
    // const key = makeUUID() // 避免同类型组件发生冲突!!!

    return h(tag, {
      props,
      scopedSlots
    })
  }
}
</script>
